<template>
  <div>
    <template v-for="(item, index) in initFilter">
      <template v-if="item.type == 'date'">
        {{ index=== 0? "" : item.AndOr ===0 ? '并且' : '或者' }}
        <el-date-picker
          :key="index"
          v-model="item.CompareValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          :placeholder="'选择['+item.Label+ ']日期'"
          class="filter-item"
        />
      </template>
      <template v-else-if="item.type == 'bool'">
        {{ index=== 0? "" : item.AndOr ===0 ? '并且' : '或者' }}
        <el-select
          :key="index"
          v-model="item.CompareValue"
          :placeholder="'请选择' + item.Label"
          @change="handeSeach"
        >
          <el-option
            v-for="(op, index2) in boolOp"
            :key="index2"
            :label="op.label"
            :value="op.value"
          />
        </el-select>

      </template>
      <template v-else-if="item.type == 'select'">
        {{ index=== 0? "" : item.AndOr ===0 ? '并且' : '或者' }}
        <el-select
          v-if="item.isItemValue"
          :key="index"
          v-model="item.CompareValue"
          filterable
          :placeholder="'选择['+item.Label+ ']参数'"
          @change="handeSeach"
        >
          <el-option
            v-for="(op, index2) in item.filterOptions"
            :key="index2"
            :label="op.itemValue"
            :value="op.itemKey"
          />
        </el-select>
        <el-select
          v-else
          :key="index"
          v-model="item.CompareValue"
          :multiple="item.isMultiple"
          filterable
          :placeholder="'选择['+item.Label+ ']参数'"
          @change="handeSeach"
        >
          <el-option
            v-for="(op, index2) in item.filterOptions"
            :key="index2"
            :label="op.label"
            :value="op.value"
          />
        </el-select>

      </template>
      <template v-else>
        {{ index=== 0? "" :item.AndOr ===0 ? '并且' : '或者' }}
        <el-input
          :key="index"
          v-model="item.CompareValue"
          style="width: 200px"
          :placeholder="'选择['+item.Label+ ']参数'"
          clearable
          @change="handeSeach"
          @clear="handleClear"
        />
      </template>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    // 查询字段类型
    initFilter: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 逻辑操作符号
      andor: [{
        value: 1,
        label: '或者'
      }, {
        value: 0,
        label: '并且'
      }],
      // 比较操作符号
      operator: [
        {
          value: 'eq',
          label: '等于'
        },
        {
          value: 'Contains',
          label: '包含'
        },

        // {
        //   value: 'StartsWith',
        //   label: '起始于'
        // },
        // {
        //   value: 'EndsWith',
        //   label: '结束于'
        // },
        {
          value: 'gt',
          label: '大于'
        },
        {
          value: 'lt',
          label: '小于'
        },
        {
          value: 'ne',
          label: '不等于'
        },

        {
          value: 'gte',
          label: '大于等于'
        },
        {
          value: 'lte',
          label: '小于等于'
        },
        {
          value: 'in',
          label: '多选'
        }
      ],
      // 保存值
      filter: [],
      isExpansion: true,
      isDynamic: true,

      boolOp: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }

    }
  },
  methods: {
    handleClear() {
      this.filter = []
      this.$emit('handleClear')
    },
    handeSeach() {
      this.$emit('handeSeach')
    }
  }

}

</script>

